
<template>
    <div class="property_list_bottom">
      <div style="display: flex;justify-content: space-between">
        <div class="search_con">
          <region-select
              ref="regionRef"
              class="region-select"
              :isAll="true"
              @funName ="funNameList"
              @initFunc ="initFuncList"
              :currentSelectCom="currentSelectCom"
              v-if="isShowSelect"
          ></region-select>
          <div   v-if="searchFields.length>0"   v-for="(item,index) in searchFields"  class="first_level_div first_level_div_width">
            <span class="label_span">{{item.cName}}</span>
            <div v-if="item.type==='input'">
              <el-input style="width: 130px"  v-model="params[item['eName']]" size="mini" placeholder="请输入..."></el-input>
            </div>
            <div v-if="item.type==='select'">
              <el-select style="width: 130px"  v-model="params[item['eName']]" size="mini"  @change="handleChange($event,item['eName'])" placeholder="请选择">
                <el-option
                    v-for="tp in item['options']"
                    :key="tp.value"
                    :label="tp.label"
                    :value="tp.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div  class="first_level_div first_level_div_width">
            <img  title="查询"  @click="searchList"   :src= "require('@/assets'+themeName+'/img/bottom_content_pop_img/icon_check.png')" />
            <el-popover
                placement="top"
                width="550"
                trigger="manual"
                v-if="seniorSearchVisible"
                @show="changePopoverStateSeniorSearch"
                v-model="searchvisible">
              <component
                  :currentConfig="currentConfig"
                  v-if="isShowTjSearchComponents"
                  ref="gjSearch"
                  @onCancel="onCancelSearch"
                  @startSearch="onStartSearch"
                  @filterSql="onFilterSql"
                  v-bind:is="seniorSearchUrl">
              </component>
              <img title="高级搜索"   @click="searchvisible = !searchvisible"    slot="reference"  :src= "require('@/assets'+themeName+'/img/bottom_content_pop_img/seniorsearch.png')"/>
            </el-popover>
            <img title="地图渲染"  v-if="isShowMapRender"    @click="renderCurrentLayer"   :src= "require('@/assets'+themeName+'/img/bottom_content_pop_img/map_show.png')" />
            <img title="重置" @click="refresh" :src= "require('@/assets'+themeName+'/img/bottom_content_pop_img/icon_refresh.png')" />
  
            <el-popover
                placement="top"
                width="800"
                trigger="click"
                v-if="tjVisible"
                @show="changePopoverState"
                @hide="hiddenPopover"
                v-model="tjvisible">
              <component   :reginonParams="reginonParams"  :currentTypeMsg="currentTypeMsg"   v-if="isShowTjComponents"   @onCancel="onCancel"  v-bind:is="pieChartCompnentUrl"></component>
              <img title="统计图"  slot="reference"  :src= "require('@/assets'+themeName+'/img/bottom_content_pop_img/icon_tj.png')" />
            </el-popover>
            <!--        <img title="统计图"  style="cursor: pointer"  src="../../assets/img/bottom_content_pop_img/icon_tj.png"/>-->
            <img title="导出"   @click="exportExcel"  :src= "require('@/assets'+themeName+'/img/bottom_content_pop_img/icon_export.png')"  />
          </div>
        </div>
      </div>
      <div class="table_con" >
        <el-table
            :height="tableHeight"
            v-loading="loading"
            v-if="tableData.length>0"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(10, 26, 29, 0.3)"
            :data="tableData"
            :row-style="iRowStyle"
            :cell-style="iCellStyle"
            :header-row-style="iHeaderRowStyle"
            :header-cell-style="iHeaderCellStyle"
            highlight-current-row
            @current-change="handleCurrentChangeTableRow"
            style="width: 100%">
          <el-table-column
              v-for="(item, index) in tableCloums"
              :key="index"
              align="center"
              :label="item.name"
              :width="item.size==='big' ? 350 :  item.size==='small'  ?   200  :  'unset'"
              :prop="item.field"
          >
            <template slot-scope="scope">
              <div v-if="item.field === 'street'">{{formatterStreet(scope.row[item.field])}}</div>
              <div v-else>{{scope.row[item.field]}}</div>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="100"
          >
            <template slot-scope="scope">
              <div class="tool_div">
                <img title="详情" class="tool_img"
                     @click="handleDetails(scope.$index, scope.row)"
                     :src= "require('@/assets'+themeName+'/img/bottom_content_pop_img/icon_search.png')"/>
                <img title="定位"  class="img_before tool_img"
                     @click="handlelocation(scope.$index, scope.row)"
                     :src= "require('@/assets'+themeName+'/img/bottom_content_pop_img/icon_location.png')"/>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div  class="table_pagination">
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
        </el-pagination>
      </div>
    </div>
  
  </template>
  
  <script>
  import axios from 'axios';
  import QS from 'qs';
  import {getPropertyList, getLayerConfig, exportExcel, getRegionContent,queryStreet,exportData} from '../../net/HttpRequest'
  import ToolBars from '../../common/ToolBars'
  import CreatevectorLayer from '../../common/giscommon/CreatevectorLayer'
  import ZoomFeature from '../../common/giscommon/ZoomFeature'
  import CreateFeatures from '../../common/giscommon/CreateFeatures'
  import RegionSelect from '../../components/ht_RegionSelect'
  import {hideFullScreenLoading, showFullScreenLoading} from "../../../src/common/loadingFunc";
  import MultiPolygon from 'ol/geom/MultiPolygon'
  import { getCenter } from 'ol/extent'
  export default {
    name: 'index',
    components:{
      'region-select':RegionSelect
    },
    props: {
       currentSelectTabCon:{
         type: Object,
         default: () => ({})
       }
    },
    data(){
      return{
        themeName:window.config.themeName,
        //统计按钮是否展示
        tjVisible:true,
        //高级搜索是否展示
        seniorSearchVisible:true,
        reginonParams:{},
        seniorSearchUrl:'',
        currentSelectCom:'propertiesList',
        loading:false,
        allFlag:false,// 是否传值全部
        flag:false,
        regionId:'',// 行政区传参
        isShowSelect:false,
        isShowTjComponents:false,
        isShowTjSearchComponents:false,
        tableData: [],
        tableCloums:[],
        //查询条件的字段
        searchFields:[],
        //查询条件的值集合-
        params:{},
        //下拉的默认值得集合
        selectDefalut:{},
        currentPage:1,
        pageSize:10,
        total:0,
        tjvisible:false,
        searchvisible:false,
        pieChartCompnentUrl:"",
        currentTypeMsg:{},
        layerConfigs:{},//图层的配置,从json的文件中获取
        createvectorLayer:null,
        currentRow:null,
        currentConfig:{},
        //高级查询返回的sql的字符串
        wheresql:"",
        //高级查询返回的openlayer的filter列表
        whereSqlFilter:[],
        tableconHeightStyle:{},
        tableHeight:parseInt(this.$store.state.bottomContentHeight.split(".")[0]) -150,
        regionList:[],
        wheresql2:"",
        isShowMapRender:false,
      }
    },
    created() {
      this.keyupSubmit();
      this.getRegionContent(window.config.districtCode,(list)=>{
        this.regionList = list;
      });
    },
    mounted () {
      if(window.config.districtLevel===1 ){
        this.isShowMapRender=true;
      }else{
        this.isShowMapRender=false;
      }
      if(window.config.districtLevel===1 || window.config.districtLevel===2){
        this.isShowSelect=true;
  
      }else{
        this.isShowSelect=false;
      }
      this.currentTypeMsg['name']=this.currentSelectTabCon['name'].replace('列表','');
      this.currentConfig['name']=this.currentSelectTabCon['name'].replace('列表','');
      this.getLayerProperties();
    },
    destroyed () {
        this.tjVisible=true;
        this.seniorSearchVisible=true;
        //数据刷新
        this.refresh();
    },
    methods:{
      // fullScreenProperties(){
      //   if(this.$store.state.isOpenPropertiesList){
      //     this.$store.commit('setIsOpenPropertiesList',false)
      //     this.tableconHeightStyle={
      //       height:'150px'
      //     }
      //   }else{
      //     this.$store.commit('setIsOpenPropertiesList',true)
      //     this.tableconHeightStyle={
      //       height:'350px'
      //     }
      //   }
      // },
      formatterStreet(value){
        if(this.regionList && this.regionList.length>0){
          let item = this.regionList.find((item)=>{
            return item.code === value
          })
          if(item){
            return item.name
          }else{
            return value
          }
        }else{
          return value
        }
      },
      getRegionContent(val,callback){
        let level = null // 2:市 3:区 4:街道
        if(window.config.districtLevel === 1){
          level = 2
        }else{
          level = 3
        }
        let params={
          level:level,
          xzdm:val,
        }
        queryStreet(params).then(res=>{
          if(res.code===200 && res.data){
            if(callback){
              callback(res['data'])
            }
          }
        })
      },
      /**
       *渲染当前选择的图层
       * @create 20220414
       */
      renderCurrentLayer(){
        let  currentPageSqlstr="";
        let layertype='';
        //高级搜索返回的参数的处理
        let code=this.layerConfigs['layerCode'];
        if(window.config.wmsNeedSpaceSearch.indexOf(code)>=0){
          layertype='wms'
        }else{
          layertype='wfs'
        }
        //当前搜索的条件的查询
        if(this.params && Object.keys(this.params).length>0 ){
         for(var key in this.params){
           if(this.params[key]!==""){
             if(key==="name"){
               if(layertype==="wms"){
                 currentPageSqlstr=  currentPageSqlstr+key+" like  '%"+this.params[key] + "%'     and  ";
               }else if(layertype==="wfs"){
                 currentPageSqlstr=  currentPageSqlstr+key+" like  '%25"+this.params[key] + "%25'     and  ";
               }
             } else  if(key==="address"){
               if(layertype==="wms"){
                 currentPageSqlstr=  currentPageSqlstr+key+" like   '%"+this.params[key] + "%'   and  ";
               }else if(layertype==="wfs"){
                 currentPageSqlstr=  currentPageSqlstr+key+" like   '%25"+this.params[key] + "%25'   and  ";
               }
             }else{
               currentPageSqlstr=  currentPageSqlstr+key+" = '"+this.params[key] + "' and  ";
             }
           }
         }
        }
        currentPageSqlstr=currentPageSqlstr.substr(0,currentPageSqlstr.length-5);
        //高级查询的sql的字符串
        if(this.wheresql!==""){
          if(currentPageSqlstr!==""){
            currentPageSqlstr=currentPageSqlstr +" and "+ this.wheresql;
          }else{
            currentPageSqlstr=this.wheresql;
          }
        }else{
           if(this.wheresql2!==""){
             if(currentPageSqlstr!==""){
               currentPageSqlstr=currentPageSqlstr +" and "+ this.wheresql2;
             }else{
               currentPageSqlstr=this.wheresql2;
             }
           }
        }
  
        ToolBars.changeMapShowLayerAccrodingSQL(
            code,
            layertype,
            currentPageSqlstr,
            this.allFlag,
            this.regionId);
      },
      // tableRowClassName({row, rowIndex}) {
      //   if (rowIndex === 1) {
      //     return 'warning-row';
      //   } else if (rowIndex === 3) {
      //     return 'success-row';
      //   }
      //   return '';
      // },
      // 获取
      /**
       * 高级查询返回的openlayer的filter列表
       */
      onFilterSql(filter){
        this.whereSqlFilter=filter;
      },
      /**
       *执行查询-高级查询返回的sql的字符串
       */
      onStartSearch(sql){
        this.wheresql=sql;
        this.wheresql2=this.wheresql;
        this.getTableList(this.layerConfigs);
      },
      handleCurrentChangeTableRow(val) {
        this.currentRow = val;
      },
      initFuncList(val){
        val = this.$store.state.region?this.$store.state.region:val
        // let region=this.$store.state.region;
        // val=this.$store.state.sourcesCatalogRegion;
        if(val.name == '全市' || val.name == '全区'){
          this.allFlag = true;
        }else{
          this.$refs.regionRef.changeVal(val.code);
          this.allFlag = false;
        }
        this.regionId = val.code
        this.getTableList(this.layerConfigs);
      },
      funNameList(val){
        if(val.name == '全市' || val.name == '全区'){
          this.allFlag = true;
        }else{
          this.$store.commit('setRegion', val)
          this.allFlag = false;
        }
        this.regionId = val.code
        this.flag = true;
        this.getTableList(this.layerConfigs);
      },
      changePopoverState(){
        this.isShowTjComponents=true;
      },
      hiddenPopover(){
        this.isShowTjComponents=false;
      },
      changePopoverStateSeniorSearch(){
        this.isShowTjSearchComponents=true
      },
      keyupSubmit() {
        document.onkeydown = e => {
          let _key = e.key;
          if (_key === "Enter") {
            this.searchList();
          }
        }
      },
      onCancel(){
         this.tjvisible=!this.tjvisible;
         this.isShowTjComponents= !this.isShowTjComponents;
      },
      onCancelSearch(){
        this.searchvisible=!this.searchvisible;
        this.isShowTjSearchComponents= !this.isShowTjSearchComponents;
        this.wheresql="";
        // this.getTableList(this.layerConfigs);
      },
     //查询结果
      searchList(){
        this.getTableList(this.layerConfigs);
      },
      //重置页面
      refresh(){
        this.currentPage=1;
        for(var key in  this.params){
          this.params[key]='';
        }
        //清空搜索条件
        this.wheresql="";
        this.wheresql2=this.wheresql;
        this.getTableList(this.layerConfigs);
        let code=this.layerConfigs['layerCode'];
        let layertype='';
        if(window.config.wmsNeedSpaceSearch.indexOf(code)>=0){
          layertype='wms'
        }else{
          layertype='wfs'
        }
        let region=this.$store.state.currentTreeRegion;
        let rtype=false;
        if(window.config.districtLevel===1){
          if(region){
            if(region.name==='全市'){
              rtype=true;
            }
            ToolBars.changeMapShowLayerAccrodingSQL(
                code,
                layertype,
                '',
                rtype,
                region.code);
          }else{
            ToolBars.changeMapShowLayerAccrodingSQL(
                code,
                layertype,
                '',
                rtype,
                null);
          }
        }
        if(this.$refs.hasOwnProperty('gjSearch')){
          if(this.$refs.gjSearch){
            this.$refs.gjSearch.removeSearch()
          }
        }
      },
      handleChange(value,type){
        // if(this.currentSelectTabCon['code']==="city_house"){
        //   let layer=ToolBars.getLayerAccroddingId("city_house_wmstitle");
        //   if(layer!==''){
        //    layer.getSource().updateParams({env:'fillColor1:0000FF;fillColor2:FF0000;'})
        //   }
        // }
        this.params[type]=value;
        this.getTableList(this.layerConfigs);
      },
      /**
       * 获取当前的图层的配置
       * @date 20211026
       */
      getCurrentLayerConfig(layerCode,callback){
        let params={
          "layerCode":layerCode
        }
        getLayerConfig(params).then(res=>{
          if(res){
            this.layerConfigs=res;
            this.currentTypeMsg['pTable']=res['pTable'];
            this.currentTypeMsg['tjFilds']=res['tjFilds'];
            if (this.currentTypeMsg['tjFilds'].length===0){
              this.tjVisible=false;
            }
            if(res['seniorSearch']){
              if(res['seniorSearch'].length===0){
                 this.seniorSearchVisible=false
              }
              this.currentConfig['config']=JSON.parse(JSON.stringify(res['seniorSearch']));
            }
            this.pieChartCompnentUrl= require(`@/widgets/ht_PropertyList/components/pieChart.vue`).default;
            this.seniorSearchUrl= require(`@/widgets/ht_PropertyList/components/seniorSearch.vue`).default;
            if(callback){
              callback(res);
            }
          }
        })
      },
      /**
       * 获取属性列表
       * @create zgf
       * @date 20211021
       */
      getLayerProperties(){
        this.tableData=[];
        if(!this.currentSelectTabCon){return;}
        this.getCurrentLayerConfig(this.currentSelectTabCon['code'],(json)=>{
          this.judgeSearchCriteriaAndTableFields(json);
          this.getTableList(json);
        });
      },
      /**
       * 判断搜索条件和表格字段展示内容
       * @creat zgf
       * @date 20211018
       */
      judgeSearchCriteriaAndTableFields(json){
        this.tableCloums=[];
        //搜索条件查询字段
        let list=json['searchField'];
        list.forEach(ttp=>{
          //注意动态参数需要使用this.$set来更新data的参数，进行v-model的绑定
          if(json['type']==='select'){
            this.$set(this.params,ttp['eName'],json['default'])
          }else{
            this.$set(this.params,ttp['eName'],"")
          }
        })
        this.searchFields=list;
        //表格展示的字段
        this.tableCloums=json['tableShowField'];
      },
      /**
       * 获取属性列表数据
       */
      getTableList(json){
        let columnsStr="";
        if(this.tableCloums.length>0){
          this.tableCloums.forEach(item=>{
            columnsStr=columnsStr+item.field+','
          })
        }else{
          return;
        }
        let params={
          layerName:json['pTable'],
          pageNum:this.currentPage,
          pageSize:this.pageSize,
          columnsStr:columnsStr+'unique_id',}
        this.reginonParams = {};
        if(this.regionId){ // 是否第一依次渲染
          if(this.allFlag && window.config.districtLevel===1){ // 市 ，市且全部
            Object.assign(this.reginonParams,{ city:this.regionId})
            Object.assign(params,{ city:this.regionId})
          }else if((window.config.districtLevel===1 && !this.allFlag)||(window.config.districtLevel===2 && this.allFlag)){ // 区，市不是全部或者区全部
            Object.assign(this.reginonParams,{ county:this.regionId})
            Object.assign(params,{ county:this.regionId})
          }else if(window.config.districtLevel===2 && !this.allFlag){ // 街道，区不是全部
            Object.assign(this.reginonParams,{ street:this.regionId})
            Object.assign(params,{ street:this.regionId})
          }
        }else{ //第一次渲染默认全部
          if(window.config.districtLevel===1){
            Object.assign(this.reginonParams,{ city:window.config.districtCode})
            Object.assign(params,{ city:window.config.districtCode})
          }else if((window.config.districtLevel===2)) {
            Object.assign(this.reginonParams, {county: window.config.districtCode,})
            Object.assign(params, {county: window.config.districtCode,})
          }
        }
        for(var key in this.params){
          if(this.params[key]){
            params[key]=this.params[key];
          }else{
            if(params.hasOwnProperty(key)){
              delete  params[key]
            }
          }
        }
  
        if(this.wheresql!==""){
          params.whereSql=this.wheresql;
        }else{
          if(this.wheresql2!==""){
            params.whereSql=this.wheresql2;
          }
        }
        // showFullScreenLoading('#app','正在加载中...');
        getPropertyList(params).then(res=>{
          if(res.code===200 && res.data){
            this.loading=false;
            this.total=res['data']['total'];
            this.tableData=res['data']['records'];
            if(res['data']['total']>0){
              //属性表查询结束数据就渲染地图 防止区级以下无法查询到数据
              if(window.config.districtLevel!==1  && this.allFlag){
                this.renderCurrentLayer();
              }
            }
          }else{
            this.loading=true;
          }
        this.$nextTick(()=>{
          let list= document.getElementsByClassName('tool_div');
  
  
          list=Array.from(list);
          list.forEach(item=>{
            let className=item.parentElement.parentElement.className;
            if(className.indexOf('is-hidden')>0){
                item.parentElement.parentElement.style.display='none'
            }
          })
        })
        }).catch(()=>{
          this.loading=true;
        })
      },
      /**
       * 展示详情
       * @date 20211026
       */
      handleDetails(index,rowData){
        rowData['layerCode']=this.currentSelectTabCon['code'];
        rowData['layerName']=this.currentSelectTabCon['name'].replace('属性','');
        rowData['pTable']=this.layerConfigs['pTable']
        //属性详情在右侧的弹窗只有一个，可以通过监听json的变化来展示数据
        this.$store.commit("setRightTabList", {
          type: "add",
          object: {
            isCheck: false,
            name:"属性详情",
            code:"property_single_details",
            type:'property_table_list_row_detail',
            data:{
              "url":'ht_PropertyDetails/index.vue',
              "features":[rowData],
            }
          },
        });
      },
      /**
       * 展示定位
       * @date 20211026
       */
      handlelocation(index,rowData){
        //由三维切换回二维
        this.globalMapType();
        let _this=this;
        let  uuid=rowData['unique_id'];
        let layerNames=this.currentSelectTabCon['layerName'];
        let layerUrl=this.currentSelectTabCon['code'];
        ToolBars.propertiesSearch(uuid,layerNames,null,(feature)=>{
          if(!feature){return}
           Object.assign(feature,{"layerUrl":this.currentSelectTabCon['code']})
          if(window.config.wmsNeedSpaceSearch.indexOf(layerUrl)>=0){
            ZoomFeature.zoomToSingleFeature(feature,20);
            if(!_this.createvectorLayer){
              _this.createvectorLayer=new CreatevectorLayer();
            }
            if(!_this.createvectorLayer.layer){
              if(_this.$store.state.wmsHeightLightFeature){
                _this.createvectorLayer.layer=_this.$store.state.wmsHeightLightFeature;
              }else{
                _this.createvectorLayer.createVectoreLayer("wms_hightlight_feature");
                _this.$store.commit('setWmsHeightLightFeature',_this.createvectorLayer.layer);
              }
            }
  
            let nFeature=CreateFeatures.createFeature(feature,false);
            _this.$store.commit('setCurrentSelectFeature',nFeature);
            _this.createvectorLayer.layer.getSource().clear();
            _this.createvectorLayer.layer.getSource().addFeature(nFeature);
            feature.geometry.coordinates[0].push(feature.geometry.coordinates[0][0])
            let polygonTurf = turf.polygon(feature.geometry.coordinates);
            let center3 = turf.centerOfMass(polygonTurf);
            YJMap.getView().setCenter(center3.geometry.coordinates)
            YJMap.getView().setZoom(14);
            setTimeout(()=>{
              window.overlay.setPosition(center3.geometry.coordinates);
            },800)
          }else{
            ToolBars.zoomToFeature(feature,_this);
          }
        });
      },
  
      handleSizeChange(val) {
  
      },
      handleCurrentChange(val) {
        this.currentPage=val;
        this.getLayerProperties();
      },
      iRowStyle:function ({row, rowIndex}) {
        return 'height:35px';
      },
      iHeaderRowStyle:function ({row, rowIndex}) {
        return 'height:35px';
      },
      iCellStyle:function ({row, column, rowIndex, columnIndex}) {
        return 'padding:5px'
      },
      iHeaderCellStyle:function ({row, column, rowIndex, columnIndex}) {
        return 'padding:3px'
      },
      handleClick(row) {
  
      },
  
      /**
       * 导出excel
       * @date 20211026
       */
      exportExcel() {
         const arr=[];
         if(this.tableCloums.length==0){
               return
         }
         this.tableCloums.forEach(item => {
           arr.push({"key":item.name,"value":item.field})
          });
        const params = {
          excelHeaders: JSON.stringify(arr),
          pageSize:this.total
        };
        if(this.wheresql!==""){
          params.whereSql=this.wheresql;
        }
  
        // axios.post(
        //         `${window.config.downloadFileBaseUrl}/${this.currentTypeMsg["pTable"]}/export`,
        //         QS.stringify(params),
        //         {
        //           responseType: "blob",
        //           headers: {
        //             area: window.config.district
        //           }
        //         }
        //     )
        Object.assign(params,{layerName:this.currentTypeMsg["pTable"]});
        showFullScreenLoading('#app','正在导出中...');
        exportData(params).then(res => {
          hideFullScreenLoading()
          const link = document.createElement("a");
          const layerNameSet= this.currentSelectTabCon["name"];
          link.style.display = "none";
          link.href = window.URL.createObjectURL(res);
          link.download = layerNameSet.replace("列表","数据");
          document.body.appendChild(link);
          link.click();
          // 释放的 URL 对象以及移除 a 标签
          URL.revokeObjectURL(link.href);
          document.body.removeChild(link);
        })
        .catch(err => {
          hideFullScreenLoading()
          throw new Error(err);
        });
  
      }
    },
    watch: {
      '$store.state.rightIsOpen': {
        deep: false,
        handler: function (n, o) {
          this.getTableList(this.layerConfigs);
        },
      },
      wheresql(n){
  
      },
      currentSelectTabCon: {
        deep: true,
        handler: function (n, o) {
          this.currentTypeMsg['name']=n['name'].replace('列表','');
          if(n.code===o.code){return;}
          this.getLayerProperties();
        },
      },
      "$store.state.bottomContentHeight":{
        deep: false,
        handler: function (n, o) {
          let height = parseInt(n.split(".")[0])
          // this.tableconHeightStyle = {
          //   height: (height - 150) +'px'
          // }
          this.tableHeight = height -150;
        },
      }
  
    },
  }
  </script>
  
  <style lang="scss" scoped>
     .property_list_bottom{
       padding: 0px 1px 10px 1px;
       display: flex;
       flex-direction: column;
       height:100%;
       ::v-deep .region-select .el-input__inner{
          width:130px;
        }
       .search_con{
          height: 28px;
          width: 100%;
          display: flex;
         .first_level_div{
           display: flex;
           align-items: center;
           justify-content: flex-start;
           .label_span{
             font-size: 12px;
             color: $main-white-color;
             //font-weight: 500;
             margin-right: 10px;
           }
           img{
             height: 28px;
             width: 28px;
             cursor: pointer;
           }
          ::v-deep  .el-icon-close{
             font-size: 20px;
             color: $main-active-color;
           }
         }
         .first_level_div_width{
           margin-left: 20px;
           //width: 18%;
         }
       }
       .table_con{
         margin-top: 10px;
         //height: 150px;
         width: 100%;
         overflow-x: hidden;
         overflow-y: auto;
       }
       .table_pagination{
         margin-top: 3px;
         height: 17px;
         display: flex;
         justify-content: flex-end;
       }
       .tool_div{
         .img_before{
           margin-left: 20px;
         }
         .tool_img{
           height: 16px;
           width: 16px;
           cursor: pointer;
         }
       }
       ::v-deep .el-table{
         background-color: $table-head-background;
       }
       ::v-deep .el-table th.el-table__cell {
         background-color: $table-head-background;
         text-align: center;
         color: $main-active-color;
         border-bottom: 6px solid $table-border;
       }
       ::v-deep .el-table td.el-table__cell{
         background-color:  $table-head-background;
         text-align: center;
         color: $main-white-color;
         border-bottom: 3px ;
         border-bottom: 6px solid $table-border;
       }
       ::v-deep  .el-input__inner{
         background-color: rgba(12, 33, 37, 0.7);
         border-radius: 4px;
         border: 1px solid $main-active-color;
       }
      ::v-deep .el-pagination .btn-next,::v-deep .el-pagination .btn-prev {
         background: center center no-repeat transparent;
         color: $main-white-color;
        font-size: 12px;
       }
       ::v-deep .el-pager{
         //background:  transparent;
         //color: #FFFFFF;
       }
       ::v-deep .el-pager li {
         background-color: transparent;
         color: $main-white-color;
         font-size: 12px;
       }
       ::v-deep  .el-pagination__total{
         color: $main-white-color;
         font-size: 14px;
       }
      ::v-deep  .el-pager li.active {
         color: $main-active-color;
         cursor: default;
       }
       ::v-deep .el-pager li:hover {
         color: $main-active-color ;
       }
      .el-table td.el-table__cell div{
         //设置内容不换行
         white-space: nowrap;
       }
       ::v-deep .el-table__fixed-right{
         height: 100% !important;
       }
       ::v-deep .el-input__inner{
         color: $main-white-color;
       }
       //解决tab切换表格高度不缩问题
       ::v-deep .el-table__header-wrapper{
         height: 36px;
       }
       ::v-deep .el-table__body-wrapper{
         height: calc(100% - 36px) !important;
       }
     }
  </style>
  
